<template>
  <div>
    <el-dialog
      style="margin-top: 15vh"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="
        openType == 1
          ? '课堂表现分打分'
          : openType == 2
          ? '课后作业分打分'
          : '课堂表现分打分'
      "
      :visible="open"
      width="500px"
      append-to-body
      @close="cancel()"
    >
      <el-form
        @submit.native.prevent
        ref="form"
        :model="form"
        :rules="rules"
        label-width="85px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="课程" prop="name">
              <div>{{ usuallyTopInfo ? usuallyTopInfo.courseName : "" }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="学生" prop="name">
              {{ info.studentName }}({{ info.studentNum }})
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item
              :label="`${
                openType == 1
                  ? '课堂表现分'
                  : openType == 2
                  ? '课后作业分'
                  : '课堂表现分'
              }`"
              prop="name"
            >
              {{ info.normalScore == 0 ? 0 : info.normalScore.toFixed(2) }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="本次打分" prop="score">
            <!-- openType 1课堂表现分 2课后作业分  3课堂表现分-->
            <el-radio-group v-removeAriaHidden  v-model="radio" size="small" v-if="openType != 2">
              <el-radio-button label="加"></el-radio-button>
              <el-radio-button label="减"></el-radio-button>
            </el-radio-group>
            <el-input-number
              v-if="openType != 2"
              :precision="1"
              step-strictly
              :step="0.1"
              style="width: 120px !important; margin-left: 6px"
              :min="0"
              controls-position="right"
              v-model="form.score"
              placeholder="请输入"
              clearable
            />
            <el-input-number
              v-if="openType == 2"
              :precision="1"
              step-strictly
              :step="0.1"
              :max="100"
              style="width: 120px !important; margin-left: 6px"
              :min="0"
              controls-position="right"
              v-model="form.score"
              placeholder="请输入"
              clearable
            />
            分<span style="font-size: 12px">{{
              openType == 2 ? "(上限100分,精确到十分位)" : "(精确到十分位)"
            }}</span>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="原因" prop="remark">
            <el-input
              v-model="form.remark"
              maxlength="100"
              show-word-limit
              :rows="3"
              type="textarea"
              placeholder="请输入原因"
            />
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关 闭</el-button>
        <!-- 下一个学生 从学生列表进入 -->
        <el-button type="primary" @click="handlePer" v-if="from == 'next'">
          上一份
        </el-button>
        <el-button type="primary" @click="handleNext" v-if="from == 'next'">
          下一份
        </el-button>
        <el-button type="primary" @click="handleTake">打分</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addcourseStuNormal,
  editcourseStuNormal,
  getAListOfClassPoints,
} from "@/api/usually/usually";

export default {
  props: {
    // 1为新增 2为编辑
    type: {
      type: [String, Number],
      default: 1,
    },
    //openType:  1-->课堂表现    2-->课后作业  3-->课堂表现分
    openType: {
      type: [String, Number],
      default: 1,
    },
    from: [String],
    open: Boolean,
    courseSchedulingId: [String, Number],
    courseStuId: [String, Number],
    usuallyTopInfo: {},
    // 用于平时分列表的下一份
    usuallyItem: {
      default: null,
    },
  },
  data() {
    return {
      params: {
        courseStuId: "",
      },
      radio: "加",
      // 用于信息显示
      info: {
        normalScore: 0,
      },
      // 用于学生的下一份
      stuIndex: undefined,
      stuList: [],
      // 表单参数
      form: {
        score: undefined,
        remark: undefined,
      },
      // 表单校验
      rules: {
        score: [{ required: true, message: "请输入本次打分", trigger: "blur" }],
      },
    };
  },
  watch: {
    async open(e) {
      if (e) {
        this.info = this.usuallyTopInfo;
        this.params.courseStuId = this.courseStuId;
        // 如果是新增
        if (this.type == 1) {
          this.reset();
          // 如果是从学生列表进来
          if (this.from == "next") {
            this.getStuList();
          }
        } else {
          let obj = JSON.parse(JSON.stringify(this.usuallyItem));
          if (obj.score < 0) {
            obj.score = -obj.score;
            this.radio = "减";
          } else {
            this.radio = "加";
          }
          this.form = obj;
        }
        if (this.openType == 2) {
          this.radio = "加";
        }
      }
    },
  },
  mounted() {},
  methods: {
    /* 获取学生列表--this.from == "next" */
    async getStuList() {
      let res = await getAListOfClassPoints(this.courseSchedulingId, {
        pageNum: 1,
        pageSize: 9999,
      });
      this.stuList = res.rows;
      if (this.stuList.length > 0) {
        for (let i = 0; i < this.stuList.length; i++) {
          if (this.info.studentId == this.stuList[i].studentId) {
            this.stuIndex = i;
          }
        }
      }
    },
    async handleTake() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: `正在处理...`,
            spinner: "el-icon-loading",
            background: "rgba(255, 255, 255, 0.3)",
          });
          try {
            let params = {
              teacherId: this.$store.getters.teacherId,
              courseStuId: this.params.courseStuId,
              ...this.form,
              //课后作业type：2，其他是1
              type: this.openType == 2 ? 2 : 1,
            };
            if (this.radio == "加") {
              params.score = params.score;
            } else {
              params.score = -params.score;
            }
            //新增打分
            if (this.type == 1) {
              let res = await addcourseStuNormal(params);
              const { code } = res;
              if (code == 200) {
                this.$modal.msgSuccess("打分成功");
                this.reset();
                this.$emit("refreshList");
                this.$emit("update:open", false);
              }
            } else {
              // 编辑打分
              let res = await editcourseStuNormal(params);
              const { code } = res;
              if (code == 200) {
                this.reset();
                this.$modal.msgSuccess("编辑成功");
                this.$emit("refreshList");
                this.$emit("update:open", false);
              }
            }
          } catch (e) {
            console.error(e);
          } finally {
            loading.close();
          }
        }
      });
    },
    //按钮--上一份
    async handlePer() {
      if (this.stuIndex == 0) {
        this.$message({
          type: "warning",
          message: "当前是第一份了",
        });
        return;
      } else {
        this.$refs["form"].validate(async (valid) => {
          if (valid) {
            let params = {
              teacherId: this.$store.getters.teacherId,
              courseStuId: this.params.courseStuId,
              ...this.form,
              //课后作业type：2，其他是1
              type: this.openType == 2 ? 2 : 1,
            };
            if (this.radio == "加") {
              params.score = params.score;
            } else {
              params.score = -params.score;
            }
            const loading = this.$loading({
              lock: true,
              text: `正在处理...`,
              spinner: "el-icon-loading",
              background: "rgba(255, 255, 255, 0.3)",
            });
            try {
              //新增打分
              if (this.type == 1) {
                let res = await addcourseStuNormal(params);
                const { code } = res;
                if (code == 200) {
                  this.$modal.msgSuccess("打分成功");
                  this.resetForm("form");
                  this.stuIndex--;
                  this.info = this.stuList[this.stuIndex];
                  this.params.courseStuId =
                    this.stuList[this.stuIndex].courseStuId;
                  this.$emit("refreshList");
                }
              }
            } catch (e) {
              console.error(e);
            } finally {
              loading.close();
            }
          }
        });
      }
    },
    // 按钮--下一份
    async handleNext() {
      if (this.stuIndex == this.stuList.length - 1) {
        this.$message({
          type: "warning",
          message: "当前是最后一份了",
        });
        return;
      } else {
        this.$refs["form"].validate(async (valid) => {
          if (valid) {
            let params = {
              teacherId: this.$store.getters.teacherId,
              courseStuId: this.params.courseStuId,
              ...this.form,
              //课后作业type：2，其他是1
              type: this.openType == 2 ? 2 : 1,
            };
            if (this.radio == "加") {
              params.score = params.score;
            } else {
              params.score = -params.score;
            }
            const loading = this.$loading({
              lock: true,
              text: `正在处理...`,
              spinner: "el-icon-loading",
              background: "rgba(255, 255, 255, 0.3)",
            });
            try {
              //新增打分
              if (this.type == 1) {
                let res = await addcourseStuNormal(params);
                const { code } = res;
                if (code == 200) {
                  this.$modal.msgSuccess("打分成功");
                  this.resetForm("form");
                  this.stuIndex++;
                  this.info = this.stuList[this.stuIndex];
                  this.params.courseStuId =
                    this.stuList[this.stuIndex].courseStuId;
                  this.$emit("refreshList");
                }
              }
            } catch (e) {
              console.error(e);
            } finally {
              loading.close();
            }
          }
        });
      }
    },
    // 表单重置
    reset() {
      this.resetForm("form");
      this.form = {
        score: undefined,
        remark: undefined,
      };
    },
    cancel() {
      this.reset();
      this.$emit("update:open", false);
    },
  },
};
</script>
<style scoped lang="scss">
</style>
